<template>
    <div>
        <div class="mdui-table-fluid">
            <table class="mdui-table mdui-table-hoverable">
                <thead>
                <tr>
                    <th>ID</th>
                    <th>HOST</th>
                    <th>API</th>
                    <th>ADMIN</th>
                    <th>DATE</th>
                </tr>
                </thead>
                <tbody
                    v-for="(item, index) in Logs"
                    :key="index"
                >
                    <tr>
                        <td>{{item.id}}</td>
                        <td>{{item.host}}:{{item.port}}</td>
                        <td>{{item.api_msg}}</td>
                        <td>{{item.is_admin}}</td>
                        <td>{{item.log_time}}</td>
                    </tr>
                </tbody>
            </table>
        </div>
        <div
          class="load"
          @click="addLog()"
        >
          <a>Load more ....</a>
        </div>
    </div>
</template>

<script>
import apiConfig from '../api/apiConfig'
export default {
  props: {
    pageNumber: {
      type: Number,
      default: 1
    }
  },
  data () {
    return {
      Logs: [],
      tmpPage: 1
    }
  },
  methods: {
    async getLog () {
      const conf = apiConfig.admin.getLog(this.pageNumber)
      const resp = await this.$axios(conf)
      this.Logs = resp.data.data.items
      this.tmpPage = this.pageNumber
    },
    async addLog () {
      this.tmpPage += 1
      const conf = apiConfig.admin.getLog(this.tmpPage)
      const resp = await this.$axios(conf)
      const arr1 = this.Logs
      const arr2 = resp.data.data.items
      const arr3 = arr1.concat(arr2)
      this.Logs = arr3
    }
  },
  mounted () {
    this.getLog()
  }
}
</script>

<style lang="less" scoped>
.container {
    width: 90%;
}
.load {
  margin: 35px 0;
  // padding-top: 25px;
  // border: 1px solid red;
  font-size: 36px;
  cursor: pointer;
  color: #4985bd;
  text-align: center;

}

.load:hover {
    color: #0285ff;
}
</style>
